<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			height: 3000px;
			background-image:url("img/u=41437659,2474737110&fm=26&gp=0.jpg") ;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		#dv1{
			width: 200px;
			height: 200px;
			background-color: red;
			position: fixed;
			top: 300px;
			left: 50px;	
		}
		img{
			width: 200px;
			height: 200px;
		}
		/* 同时设置#dv2,#dv3的元素高度、宽度、背景颜色，设置两个元素的定位是绝对定位 */
		#dv2,#dv3{
			width: 200px;
			height: 200px;
			background-color: lightpink;
			position: absolute;
			right: 50px;
			top: 50px;
		}
		/* 设置dv3的背景颜色和位置，对上面进行赋值过的定位和背景会覆盖
		 z-index设置层级  数字越小层级越靠下 数字越大  层级越考上*/
		#dv3{
			background-color: #7FFF00;
			right: 80px;
			top:80px;
			z-index: 6;
		}
		#dv2{
			z-index: 3;
		}
		
		</style>
	</head>
	<body>
		<div id="dv1">
			<a href="overflow属性讲解.html">
				<img src="img/u=31249274,3006398027&fm=200&gp=0.jpg" />
			</a>
		</div>
		
		<div id="dv2"></div>
		<div id="dv3"></div>
	</body>
</html>
